<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>房屋信息系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="wrap">
    <nav class="navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Shakespeare</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">我是租客</a></li>
                    <li><a href="#">我是房东</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="input-group input-group-lg">
            <span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1">
                <a href="#"></a>
            </span>
            <input type="text" class="form-control" placeholder="地区" aria-describedby="sizing-addon1" v-model="house.region">
            <span class="input-group-btn">
            <button class="btn btn-default" type="button" v-on:click="search">Go!</button>
            </span>
        </div>
    </div>
    <div class="container">
        <div class="page-header">
            <h1><small>筛选房源</small></h1>
        </div>
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">户型:</div>
                <div class="panel-body" style="padding: 5px;">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#" v-on:click="setStyle('1室1厅')">1室1厅</a></li>
                        <li role="presentation"><a href="#" v-on:click="setStyle('2室1厅')">2室1厅</a></li>
                        <li role="presentation"><a href="#" v-on:click="setStyle('3室1厅')">3室1厅</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">面积(平米):</div>
                <div class="panel-body" style="padding: 5px;">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#" v-on:click="setArea(0)">40以下</a></li>
                        <li role="presentation"><a href="#" v-on:click="setArea(40)">40-80</a></li>
                        <li role="presentation"><a href="#" v-on:click="setArea(80)">80-120</a></li>
                        <li role="presentation"><a href="#" v-on:click="setArea(120)">120以上</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">租金:</div>
                <div class="panel-body" style="padding: 5px;">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#" v-on:click="setPrice(0)">3000以下</a></li>
                        <li role="presentation"><a href="#" v-on:click="setPrice(3000)">3000-5000</a></li>
                        <li role="presentation"><a href="#" v-on:click="setPrice(5000)">5000-8000</a></li>
                        <li role="presentation"><a href="#" v-on:click="setPrice(8000)">8000以上</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="page-header">

        </div>
        <div class="row" v-for="h in houses">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a v-bind:href="getUrl(h.id)">
                        <img src="roomdetail/house1.jpg">
                    </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-8">
                <div class="caption">
                    <h3>{{h.rentType}} {{h.village}}{{h.style}}-{{h.orientation}}</h3>
                    <h3>¥ {{h.price}} / 月</h3>
                    <p>[{{h.region}}] {{h.traffic}}</p>
                    <p>{{h.area}} ㎡ | {{h.floor}}层 | {{h.style}}</p>
                    <p><a v-bind:href="getUrl(h.id)" class="btn btn-primary" role="button">查看详情</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<div class="footer">
    <div class="container" style="padding: 20px;">
        <p class="muted credit">Produced By Morroc.</p>
    </div>
</div>

<script src="js/search.js"></script>
</body>
</html>